<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>推送用户在线图表管理</title>
    <script type="text/javascript" src="\static\Highcharts-4.0.4\js\jquery-1.8.2.min.js"></script>
    <script src="\static\Highcharts-4.0.4\js\highcharts.js"></script>
    <script src="\static\Highcharts-4.0.4\js\modules\exporting.js"></script>

    <script type="text/javascript">
        $(function () {
            console.log("pushType changed:123123 " + "${appUserOnline}");
            var appUserOnline = ${fns:toJson(appUserOnline)};
            /* console.log("pushType changed: " + appUserOnline.appName);
             console.log("pushType changed: " + appUserOnline.appOnlineNum);*/

            var series = [];
            var appName = appUserOnline.appName;
            var appOnlineNum = appUserOnline.appOnlineNum;
            if ("undefined" != typeof appName) {
                for (var i = 0; i < appName.length; i++) {
                    series.push({
                        "name": appName[i], "data": eval("[" + appOnlineNum[i] + "]")
                        /*"name": appName[i],"data":eval("[1,1,1,1,1,1,1,1,200000000000000,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1]")*/
                    });
                }
            }

            Highcharts.setOptions({
                lang: {
                    printChart: "打印图表",
                    downloadJPEG: "下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG 图片",
                    downloadSVG: "下载SVG 矢量图",
                    exportButtonTitle: "导出图片"
                },
                credits: {
                    enabled: false
                }
            });

            $('#container').highcharts({
                title: {
                    text: '今日用户在线数统计',
                    x: -20 //center
                },
                xAxis: {
                    title: {
                        text: '时刻 (时)'
                    },
                    categories: ['1', '2', '3', '4', '5',
                        '6', '7', '8', '9', '10', '11', '12',
                        '13', '14', '15', '16', '17', '18',
                        '19', '20', '21', '22', '23', '24'],
                    min: 0,
                },
                yAxis: {
                    title: {
                        text: '总人数 (人)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }],
                    allowDecimals: false,
                    min: 0
                },
                tooltip: {
                    valueSuffix: '人'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: series
                /*[{
                 name: appName[0],
                 data: [1,1,1,1,1,1,1,1,2,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1],
                }, {
                 name: appName[1],
                 data: appOnlineNum[1]
                }, {
                 name: appName[2],
                 data: appOnlineNum[2]
                }, {
                 name: appName[3],
                 data: appOnlineNum[3]
                }, {
                 name: appName[4],
                 data: appOnlineNum[4]
                 }, {
                 name: appName[5],
                 data: appOnlineNum[5]
                 }]*/
            });
        });
    </script>

</head>
<body>
<div id="container" style="min-width: 500px; height: 800px; margin: 0 auto"></div>
</body>
</html>